/**
 * 淘宝御城河校验
 */

 import React, { useState, useEffect } from 'react';
 import { Form, Input, Button, Row, Col, message } from 'antd';
 import CommonModal from '@/components/CommonModal';
 import CommonLoading from '@/components/CommonLoading';
 import { sendCode, checkCode } from '../service';
 import useLoginStore from '../loginStore.js';

//验证验证码的fid
let newFid = undefined;
 
 const PreLogin = () => {

	const checkInfo = useLoginStore(state => state.checkInfo);
	const cancelModal = useLoginStore(state => state.cancelModal);
	const newLogin = useLoginStore(state => state.newLogin);
	const login = useLoginStore(state => state.login);


	 const [second, setSecond] = useState(0);
	 
	 const [loading, setLoading] = useState(false);

	 const { visible, phoneNumber, fid, username, flag } = checkInfo;



	 useEffect(() => {
		 if (visible) {
			 form.resetFields();
		 }
	 }, [visible])
 
	 const layout = {
		 labelCol: {
			 span: 7,
		 },
		 wrapperCol: {
			 span: 13,
		 },
	 };
 
	 const [form] = Form.useForm();
 
	 //获取验证码
	 const code = async (val) => {
		 const res = await sendCode({
			 fid,
			 username
		 })

		 if (res.success) {
			 message.success('验证码发送成功!');
			 newFid = res.data.fid;
		 }
	 }
 
	 //获取验证码点击校验倒数事件
	 const verification = async () => {
		 form.validateFields(['mobile']).then((value) => {
			 let num = 59
			 setSecond(59)
			 let seconds = setInterval(() => {
				 num = num - 1
				 setSecond(num)
				 if (num === 0) {
					 clearInterval(seconds);
					 setSecond(0);
				 }
			 }, 1000)
			 code(value)
		 })
	 }
 
	 //取消弹框点击事件
	 const ModalCancel = async () => {
		 cancelModal();
		 form.resetFields();
		 setSecond(0);
	 }
 
	 // 验证码提交
	 const onOk = () => {
		 form.validateFields().then(async (val) => {
			 setLoading(true);
			 const res = await checkCode({
				 code: val.code,
				 fid: newFid,
				 username,
			 })
			 if (res.success) {
				 newFid = undefined;
				 if(flag) {
					newLogin();
				 } else {
					login();
				 }
			 }
			 setLoading(false);
		 }).catch(() => {
 
		 })
	 }
 
	 return (
		 <CommonModal
			 title="安全验证"
			 visible={visible}
			 onOk={onOk}
			 onCancel={ModalCancel}
			 defaultContainer={true}
		 >
			 <div style={{ marginBottom: 24, paddingLeft: '5%' }}>系统检测到您当前的网络环境不安全，请确保是您本人操作</div>
			 <Form
				 {...layout}
				 name="export-tel-code"
				 form={form}
				 initialValues={{
					 mobile: phoneNumber
				 }}
			 >
				 <Form.Item
					 label="手机号"
					 name="mobile"
					 rules={[
						 {
							 required: true,
							 message: '请输入正确的手机号!',
						 },
					 ]}
				 >
					 <Input placeholder="请输入手机号" disabled={true} />
				 </Form.Item>
 
				 <Form.Item
					 label="手机验证码"
					 name="code"
					 rules={[
						 {
							 required: true,
							 message: '请输入正确的手机验证码!',
						 },
					 ]}
				 >
					 <Row gutter={8}>
						 <Col span={12}>
							 <Input placeholder="请输入手机验证码" />
						 </Col>
						 <Col span={12}>
							 <Button style={{ width: '109px' }} disabled={second} onClick={verification}>{second ? `${second}s` : '获取验证码'}</Button>
						 </Col>
					 </Row>
				 </Form.Item>
			 </Form>
			 <CommonLoading loading={loading} />
		 </CommonModal >
	 )
 }

 export default PreLogin;
 